<template>
  <div class="dashboard-container">
    <!-- 顶部统计卡片 -->
    <a-row :gutter="16" class="stat-cards">
      <a-col :span="6">
        <a-card class="stat-card" :bordered="false">
          <div class="stat-content">
            <car-outlined class="stat-icon vehicle" />
            <div class="stat-info">
              <div class="stat-title">车辆总数</div>
              <div class="stat-value">{{ totalVehicles }}</div>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card class="stat-card" :bordered="false">
          <div class="stat-content">
            <user-outlined class="stat-icon driver" />
            <div class="stat-info">
              <div class="stat-title">驾驶员总数</div>
              <div class="stat-value">{{ totalDrivers }}</div>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card class="stat-card" :bordered="false">
          <div class="stat-content">
            <environment-outlined class="stat-icon trip" />
            <div class="stat-info">
              <div class="stat-title">本月出车次数</div>
              <div class="stat-value">{{ monthlyTrips }}</div>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card class="stat-card" :bordered="false">
          <div class="stat-content">
            <dollar-outlined class="stat-icon cost" />
            <div class="stat-info">
              <div class="stat-title">本月费用支出</div>
              <div class="stat-value">¥{{ monthlyCost }}</div>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <!-- 图表区域 -->
    <a-row :gutter="16" class="chart-row">
      <a-col :span="12">
        <a-card :bordered="false" class="chart-card">
          <template #title>
            <div class="chart-header">
              <h3>车辆分布统计</h3>
              <a-radio-group v-model:value="vehicleChartType" size="small">
                <a-radio-button value="manufacturer">品牌</a-radio-button>
                <a-radio-button value="count">数量</a-radio-button>
              </a-radio-group>
            </div>
          </template>
          <div ref="vehicleTrendChartRef" class="chart-container"></div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card :bordered="false" class="chart-card">
          <template #title>
            <div class="chart-header">
              <h3>不同年龄段驾驶员人数</h3>
              <a-radio-group v-model:value="driverChartType" size="small">
                <a-radio-button value="age">年龄段</a-radio-button>
                <a-radio-button value="driverCount">人员数量</a-radio-button>
              </a-radio-group>
            </div>
          </template>
          <div ref="driverRankChartRef" class="chart-container"></div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick, watch } from 'vue'
import * as echarts from 'echarts'
import { getDataList } from '@/api/data'
import { CarOutlined, UserOutlined, EnvironmentOutlined, DollarOutlined } from '@ant-design/icons-vue'

const vehicleTrendChartRef = ref(null)
const driverRankChartRef = ref(null)
let trendChart = null
let rankChart = null

const vehicleCountChartOption = ref({
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        type: 'category',
        data: []
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '车辆数量',
            type: 'line',
            smooth: true,
            data: [],
            itemStyle: {
                color: '#409EFF'
            }
        }
    ]
})

const driverRankChartOption = ref({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: '15%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: [],
        inverse: true
    },
    series: [
        {
            name: '驾驶员人数',
            type: 'bar',
            data: [],
            barWidth: '60%',
            itemStyle: {
                color: '#67C23A'
            },
            label: {
                show: true,
                position: 'right'
            }
        }
    ]
})

// 添加统计数据
const totalVehicles = ref(0)
const totalDrivers = ref(0)
const monthlyTrips = ref(0)
const monthlyCost = ref(0)
const vehicleChartType = ref('manufacturer')
const driverChartType = ref('age')

// 监听图表类型变化
watch([vehicleChartType, driverChartType], () => {
  loadDashboardData()
})

// 初始化图表
const initCharts = () => {
    // 初始化趋势图
    if (vehicleTrendChartRef.value && !trendChart) {
        trendChart = echarts.init(vehicleTrendChartRef.value)
        trendChart.setOption(vehicleCountChartOption.value)
    }

      if (driverRankChartRef.value && !rankChart) {
        rankChart = echarts.init(driverRankChartRef.value)
        rankChart.setOption(vehicleCountChartOption.value)
    }
}

// 加载数据
const loadDashboardData = async () => {
    try {
        const res = await getDataList()
        if (res.code === 200) {
            console.log(res)

            totalDrivers.value=res.data.driverCount
            totalVehicles.value=res.data.vehicleAllCount
            monthlyTrips.value=res.data.tripCount
            monthlyCost.value=res.data.drivingCost

            // 更新图表配置
            vehicleCountChartOption.value.xAxis.data = res.data.vehicleCount.map(item => item.manufacturer) || []
            vehicleCountChartOption.value.series[0].data = res.data.vehicleCount.map(item => item.vehicleCount) || []
            
            driverRankChartOption.value.yAxis.data = res.data.employeeCount.map(item => item.age).concat('年龄') || []
            driverRankChartOption.value.series[0].data = res.data.employeeCount.map(item => item.employeeCount) || []
            // 等待 DOM 更新后初始化图表
            await nextTick()
            initCharts()
            // 更新图表数据
            trendChart?.setOption(vehicleCountChartOption.value)
            rankChart?.setOption(driverRankChartOption.value)
           
        }
    } catch (error) {
        console.error('获取数据失败：', error)
    }
}

onMounted(() => {
    nextTick(() => {
        initCharts()
        loadDashboardData()
    })
})
</script>

<style scoped>
.dashboard-container {
  padding: 24px;
  background-color: #f0f2f5;
  min-height: 100vh;
}

.stat-cards {
  margin-bottom: 24px;
}

.stat-card {
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: all 0.3s;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }
}

.stat-content {
  display: flex;
  align-items: center;
  padding: 8px;
}

.stat-icon {
  font-size: 48px;
  margin-right: 16px;
  padding: 16px;
  border-radius: 8px;

  &.vehicle {
    background-color: #e6f7ff;
    color: #1890ff;
  }

  &.driver {
    background-color: #f6ffed;
    color: #52c41a;
  }

  &.trip {
    background-color: #fff7e6;
    color: #fa8c16;
  }

  &.cost {
    background-color: #fff1f0;
    color: #f5222d;
  }
}

.stat-info {
  flex: 1;
}

.stat-title {
  font-size: 14px;
  color: #8c8c8c;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: #262626;
}

.chart-row {
  margin-bottom: 24px;
}

.chart-card {
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  height: 100%;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px;

  h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: #262626;
  }
}

.chart-container {
  height: 300px;
  padding: 16px 0;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .stat-cards .ant-col {
    margin-bottom: 16px;
  }
}

@media (max-width: 768px) {
  .dashboard-container {
    padding: 12px;
  }

  .chart-row .ant-col {
    margin-bottom: 16px;
  }

  .stat-value {
    font-size: 20px;
  }

  .stat-icon {
    font-size: 36px;
    padding: 12px;
  }
}
</style>
